<template>
  <view class="page">
    <!-- 声音训练额度 -->
    <view class="title">声音训练额度</view>
    <view class="flex-between margin20 padding-row30">
      <view class="li flex-column flex-between align-center">
        <text style="font-weight: 600; font-size: 34rpx; color: #000"
          >{{ availableQuota }}次</text
        >
        <text style="color: #7b838d">可用额度</text>
      </view>
      <view class="li flex-column flex-between align-center">
        <text style="font-weight: 600; font-size: 34rpx; color: #000"
          >{{ usedQuota }}次</text
        >
        <text style="color: #7b838d">已使用额度</text>
      </view>
    </view>

    <!-- 购买声音训练额度 -->
    <view class="title">购买声音训练额度</view>
    <view class="inpVue margin20">
      <view class="flex-between align-center">
        <text style="color: #333; line-height: 1">训练单价</text>
        <text
          style="
            color: #000;
            line-height: 1;
            font-size: 30rpx;
            font-weight: 600;
          "
          >99元</text
        >
      </view>
      <view class="flex-between align-center margin40">
        <text style="color: #333; line-height: 1">训练次数</text>
        <u-number-box
          v-model="number"
          @change="numberChange"
          :min="1"
          :max="99"
        ></u-number-box>
      </view>
      <view class="flex-between align-center margin40">
        <text style="color: #333; line-height: 1">总金额</text>
        <text
          style="
            color: #f8c329;
            line-height: 1;
            font-size: 30rpx;
            font-weight: 600;
          "
          >{{ number * 99 }}元</text
        >
      </view>
      <view class="btn margin40" @click="buyFun()">立即购买</view>
      <view
        class="margin30 text-center"
        style="color: #333; font-size: 26rpx; line-height: 1"
        >请注意，购买的训练次数无法退款</view
      >
    </view>

    <!-- 已训练声音 -->
    <view class="title">已训练声音</view>
    <view class="listVue margin20">
      <!-- 无数据显示 -->
      <view
        class="w100 flex-column align-center padding-column50"
        v-if="isEmpty"
      >
        <image
          src="https://ant-aiet.oss-cn-hangzhou.aliyuncs.com/assets/empty.png"
          style="width: 256rpx; height: 256rpx"
        ></image>
        <text style="color: #81868e">暂无已训练声音</text>
      </view>

      <view
        class="item flex align-center margin20"
        v-for="(item, index) in list"
        :key="index"
      >
        <view class="playBtn relative" @click="playFun(item.url, item.id)">
          <image
            src=""
            style="width: 44rpx; height: 44rpx"
            class="absolute-auto"
            v-if="audioId != item.id"
          ></image>
          <image
            src=""
            style="width: 44rpx; height: 44rpx"
            class="absolute-auto"
            v-else
          ></image>
        </view>
        <view class="content flex-between padding-row20 align-center">
          <text style="color: #333">{{ item.name }}-{{ item.sex }}</text>
          <u-icon
            name="trash-fill"
            size="42"
            color="#999"
            @click="
              deleteId = item.id;
              show = true;
            "
          />
        </view>
      </view>
    </view>

    <!-- 删除声音 -->
    <u-modal
      v-model="show"
      content="确认删除该声音"
      confirm-color="#F8C329"
      :show-cancel-button="true"
      @confirm="deleteSoundTrain"
    ></u-modal>
  </view>
</template>

<script>
export default {
  data() {
    return {
      availableQuota: 0,
      usedQuota: 0,
      number: 1,
      list: [],
      isEmpty: true,
      isPlay: false,
      audioId: 0,
      audioContext: null,
      show: false,
      deleteId: "",
    };
  },

  async onLoad() {
    await this.getList();
    await this.getSoundQuota();
  },

  onUnload() {
    if (this.audioContext) {
      this.audioContext.destroy();
      this.audioContext = null;
    }
  },

  methods: {
    numberChange(e) {
      if (e.value > 99) {
        this.$u.toast("训练次数不能超过99次");
        this.number = 99; // 确保数值不超过99
      } else {
        this.number = e.value;
      }
    },

    // 获取用户已完成训练的声音列表
    async getList() {
      const res = await this.$request(
        "/shuziren/soundTrain/done",
        { sex: "全部" },
        "GET"
      );
      if (res.code === 200) {
        this.list = res.data;
        this.isEmpty = res.data.length === 0;
      }
    },

    // 获取用户声音训练额度
    async getSoundQuota() {
      const res = await this.$request("/shuziren/soundQuota", {}, "GET");
      if (res.code === 200) {
        this.availableQuota = res.data.availableQuota;
        this.usedQuota = res.data.usedQuota;
      }
    },

    // 删除声音
    async deleteSoundTrain() {
      const res = await this.$request(
        "/shuziren/soundTrain",
        {
          id: this.deleteId,
        },
        "DELETE"
      );
      if (res.code === 200) {
        this.getList();
        this.$u.toast("删除成功");
      } else {
        this.$u.toast(res.msg);
      }
    },

    // 立即购买
    async buyFun() {
      uni.showLoading();
      const res = await this.$request(
        "/aiet-user-center/user/orders/wxPay",
        {
          productName: "购买" + this.number + "次声音训练额度",
          orderAmount: 99 * this.number,
          // orderAmount: 0.01,
          platform: "数字人-H5",
          productType: 4,
          soundNum: this.number,
          manufacturer: 1,
        },
        "POST",
        "application/json"
      );
      if (res.code === 200) {
        uni.hideLoading();
        uni.hideLoading();
        let payment = res.data;
        let that = this;
        uni.requestPayment({
          timeStamp: payment.timeStamp,
          nonceStr: payment.nonceStr,
          package: payment.package,
          signType: payment.signType,
          paySign: payment.paySign,
          success(payRes) {
            that.$u.toast("购买成功");
            setTimeout(() => {
              that.getSoundQuota();
              that.getList(); // 刷新列表数据
            }, 500);
          },
          fail(payErr) {
            uni.hideLoading();
            console.log("支付失败", payErr);
          },
        });
      } else {
        uni.hideLoading();
        this.$u.toast(res.msg);
      }
    },

    // 播放列表音频
    playFun(url, id) {
      if (this.audioId === id) {
        this.audioContext.pause();
        this.audioId = 0;
        return;
      }
      if (this.audioId && this.audioId != id) {
        this.audioContext.destroy();
        this.audioContext = null;
        this.audioId = 0;
      }
      this.audioId = id;
      this.audioContext = uni.createInnerAudioContext();
      this.audioContext.autoplay = true;
      this.audioContext.src = url;
      this.audioContext.onPlay(() => {
        console.log("开始播放");
      });
      this.audioContext.onEnded(() => {
        console.log("播放结束");
        this.audioId = 0;
        this.audioContext.destroy();
        this.audioContext = null;
      });
    },
  },
};
</script>

<style lang="less" scoped>
.title {
  font-size: 30rpx;
  color: #000;
  font-weight: 600;
  padding: 30rpx 0 0 30rpx;
}
.li {
  width: 330rpx;
  height: 140rpx;
  background: #fff;
  box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(178, 178, 178, 0.25),
    inset 0rpx 8rpx 8rpx 0rpx rgba(255, 255, 255, 0.25);
  border-radius: 12rpx;
  padding: 25rpx 0;
}
.inpVue {
  width: 690rpx;
  background: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(178, 178, 178, 0.25),
    inset 0rpx 8rpx 8rpx 0rpx rgba(255, 255, 255, 0.25);
  .btn {
    width: 100%;
    height: 88rpx;
    background: #f8c329;
    border-radius: 12rpx;
    line-height: 88rpx;
    text-align: center;
    color: #fff;
  }
}
.listVue {
  width: 690rpx;
  .item {
    width: 100%;
    height: 80rpx;
    background: #fff;
    overflow: hidden;
    border-radius: 12rpx;
    .playBtn {
      width: 80rpx;
      height: 80rpx;
      background: #ebeded;
    }
    .content {
      width: 610rpx;
      height: 80rpx;
      background: #f5f5f5;
    }
  }
}
</style>
